<template>
  <div >
<!--    <div class="text-sm text-gray-500">-->
<!--      共 {{ total }} 条记录-->
<!--    </div>-->

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    />
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  currentPage: {
    type: Number,
    required: true,
  },
  pageSize: {
    type: Number,
    required: true,
  },
  total: {
    type: Number,
    required: true,
  },
});

const emits = defineEmits(['size-change', 'current-change']);

// 处理每页数量变化
const handleSizeChange = (newSize) => {
  emits('size-change', newSize);
};

// 处理页码变化
const handleCurrentChange = (newPage) => {
  emits('current-change', newPage);
};
</script>

<style scoped>
.el-pagination {
  margin-top:75px
}
</style>
